<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Closure233</title><meta name="author" content="Closure233"><meta name="copyright" content="Closure233"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="Closure233">
<meta property="og:url" content="https://closure.gitee.io/index.html">
<meta property="og:site_name" content="Closure233">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://closure.gitee.io/images/avatar.gif">
<meta property="article:author" content="Closure233">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://closure.gitee.io/images/avatar.gif"><link rel="shortcut icon" href="/images/moss.ico"><link rel="canonical" href="https://closure.gitee.io/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: true,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Closure233',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-08-09 23:30:14'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/images/avatar.gif" onerror="onerror=null;src='/images/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">11</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">0</div></a></div><hr/></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/images/background1.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="Closure233"><span class="site-name">Closure233</span></a></span><div id="menus"><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Closure233</h1><div id="site-subtitle"><span id="subtitle"></span></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/2023/08/08/Axios/" title="Axios"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/08/08/Axios/" title="Axios">Axios</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-08-08T03:30:00.000Z" title="Created 2023-08-08 11:30:00">2023-08-08</time></span></div><div class="content">AxiosAxios简介Axios是一个基于Promise的网络请求库，可用于node.js和浏览器环境中。它可以同时在服务端和客户端运行。在服务端，它使用原生的node.js的http模块；在客户端（浏览器），它使用XMLHttpRequests。
特性
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

使用实例使用CommonJS中的require()引入Axios可以获得TypeScript类型推断（智能感知/自动完成）：
123456789101112131415161718192021222324252627282930313233343536373839const axios = require(&#x27;axios&#x27;);// URL携带参数，发起GET请求axios.get(&#x27;/post?ID=12312&#x27;).then((response) =&gt; &#123;    // 请 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/08/04/Ajax%E8%AF%B7%E6%B1%82/" title="AJAX请求"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/08/04/Ajax%E8%AF%B7%E6%B1%82/" title="AJAX请求">AJAX请求</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-08-03T16:12:00.000Z" title="Created 2023-08-04 00:12:00">2023-08-04</time></span></div><div class="content">AJAX请求AJAX简介AJAX（Asynchronous JavaScript and XML，异步的JavaScript和XMl），是一种使用现有标准的新方法。AJAX的最大优点是在不重新加载页面的情况下与服务器交换数据并更新部分网页的技术。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。XMLHttpRequest 只是实现 Ajax 的一种方式。
AJAX 工作原理：
AJAX是基于现有的Internet标准，并且联合使用它们：
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

创建XMLHttpRequest对象创建 XMLHttpRequest 对象的语法：
1variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject 对象：
1variable = new ActiveXObject(&quot;Microsoft.XM ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/08/04/JavaScript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%92%8CPromise/" title="JavaScript异步编程和Promise"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/08/04/JavaScript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%92%8CPromise/" title="JavaScript异步编程和Promise">JavaScript异步编程和Promise</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-08-03T16:12:00.000Z" title="Created 2023-08-04 00:12:00">2023-08-04</time></span></div><div class="content">JavaScript异步编程和PromiseJavaScript异步编程异步的概念异步（Asynchronous，async）是相对于同步（Synchronous，sync）的一个概念。在传统单线程编程中，程序的运行是同步的（指程序在一个控制流序列中顺序执行）。异步的概念则是不保证执行顺序与原有的序列有顺序关系。简而言之，同步是按代码顺序执行，异步不按代码顺序执行，异步的执行效率更高。

异步就是从主线程发射一个子线程来完成任务。
异步编程的使用场景在前端编程中，可以在主线程处理一些简短快速的操作，主线程作为一个线程，不能同时接收多方面的请求，所以，当一个事件没有结束时，界面无法处理其他请求（线程阻塞）。为了避免阻塞，可以使用子线程来完成一些比较消耗计算资源和时间的事件，如读取大文件或发出网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。
子线程有一个局限性：主进程发出子线程完成后无法监控子线程的状态。为了解决这个问题，需要在异步操作中通过回调函数实现异步任务的结果处理。
回调函数回调函数是异步任务启动时设置的一个函数，用于在任务结束后处理任务结果的函数。
12 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/07/14/JavaScript%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/" title="JavaScript数组常用方法"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/07/14/JavaScript%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/" title="JavaScript数组常用方法">JavaScript数组常用方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-07-14T07:45:00.000Z" title="Created 2023-07-14 15:45:00">2023-07-14</time></span></div><div class="content">JavaScript数组常用方法1、不改变原数组，返回新数组join()：把数组中所有元素放入一个字符串中，不同元素中间插入join输入的参数，拼接为一个字符串并返回。12const arr = [&#x27;hello&#x27;, &#x27;js&#x27;, &#x27;world&#x27;];arr.join(&#x27; &#x27;); // hello js world

concat()：按输入顺序连接多个（含两个）数组，不改变原始数组，返回被连接数组的一个副本，可连续 concat连接。1234const arr1 = [1, 2, 3, 4];const arr2 = [&#x27;hello&#x27;, &#x27;js&#x27;, &#x27;world&#x27;];const arr3 = [5, 6, 7];arr.concat(arr1, arr2).concat(8, 9); // [1, 2, 3, 4, &#x27;hello&#x27;, &#x27;js&#x27;, &#x27;world&#x27;, 5, 6, 7, 8, 9 ] ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/06/21/%E7%AE%80%E5%8D%95%E7%9A%84CSS%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/" title="简单的CSS效果实现"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/06/21/%E7%AE%80%E5%8D%95%E7%9A%84CSS%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/" title="简单的CSS效果实现">简单的CSS效果实现</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-06-21T05:30:00.000Z" title="Created 2023-06-21 13:30:00">2023-06-21</time></span></div><div class="content">简单的CSS效果实现CSS绘制运动渐变式背景123456789101112131415161718192021222324252627282930313233&lt;head&gt;  &lt;meta charset=&quot;UTF-8&quot; /&gt;  &lt;title&gt;title&lt;/title&gt;  &lt;style&gt;    body &#123;        display: flex;        justify-content: center;        align-items: center;        height: 100vh;        color: #fff;        background-image: linear-gradient(            125deg, #2c3e50, #27ae60,            #2980b9, #e74c3c, #8e44ad        );        background-size: 400%;        animation: bgmo ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/05/20/%E8%8A%82%E6%B5%81%E5%87%BD%E6%95%B0%E5%92%8C%E9%98%B2%E6%8A%96%E5%87%BD%E6%95%B0/" title="节流函数和防抖函数"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/20/%E8%8A%82%E6%B5%81%E5%87%BD%E6%95%B0%E5%92%8C%E9%98%B2%E6%8A%96%E5%87%BD%E6%95%B0/" title="节流函数和防抖函数">节流函数和防抖函数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-05-20T03:30:00.000Z" title="Created 2023-05-20 11:30:00">2023-05-20</time></span></div><div class="content">节流函数和防抖函数节流和防抖函数都可以控制函数调用的频率以优化应用性能。
区别
防抖函数是触发事件后的一段设定的时间内只执行一次函数，设定的时间内多次触发不会执行函数，重新计时。

节流函数是触发事件后的一段设定时间内只执行一次函数，多次触发也只有一次有效，没有计时。


适用场景
防抖
1）搜索框输入内容时请求资源，用户不断输入时，利用防抖函数节约请求资源；
2）窗口大小不断改变，不断触发window的resize事件，利用防抖函数只执行一次。

节流
1）鼠标的不断点击事件，用节流来限制只在指定的时间内执行一次函数；
2）滚动触发事件，如滚动加载数据。


具体实现代码防抖函数12345678910// func：需要防抖执行的函数，delay：设定时间function debounce(func, delay)&#123;    let timer = null;    return function()&#123;        clearTimeout(timer);        timer = setTimeout(() =&gt; &#123;            f ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/05/20/JavaScript%E7%9A%84%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE/" title="JavaScript的原型和原型链"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/20/JavaScript%E7%9A%84%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE/" title="JavaScript的原型和原型链">JavaScript的原型和原型链</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-05-20T03:30:00.000Z" title="Created 2023-05-20 11:30:00">2023-05-20</time></span></div><div class="content">JavaScript的原型和原型链原型JavaScript没有类的概念，所以使用了构造函数来实现继承机制：
1234567// 构造函数和实例化function Person(name, age, sex)&#123;    this.name = name;    this.age = age;    this.sex = sex;&#125;const person = new Person(&#x27;Ada&#x27;, 18, &#x27;female&#x27;);

如上代码所示，JavaScript通过构造函数生成实例，但是在构造函数中通过this赋值的属性或方法是每个实例的实例属性和实例方法，无法实现公共属性的共享。为了解决共享公共属性的问题，js增加了一个原型对象（prototype）来存储构造函数的公共属性和方法。
123456// 在原型对象上增加一个公共方法Person.prototype.getAge = function()&#123;    console.log(`$&#123;this.age&#125;&#x27;s age is $&#123;t ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/05/20/Promise%E6%98%AF%E4%BB%80%E4%B9%88%E5%8F%8A%E5%85%B6%E6%96%B9%E6%B3%95%E7%89%B9%E6%80%A7/" title="Promise是什么及其方法特性"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/20/Promise%E6%98%AF%E4%BB%80%E4%B9%88%E5%8F%8A%E5%85%B6%E6%96%B9%E6%B3%95%E7%89%B9%E6%80%A7/" title="Promise是什么及其方法特性">Promise是什么及其方法特性</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-05-20T03:30:00.000Z" title="Created 2023-05-20 11:30:00">2023-05-20</time></span></div><div class="content">Promise是什么及其方法特性12345678910for (var i = 0;i&lt;arr.length-1;i++)&#123;  for (var j = 0;j &lt; arr.length-1-i;j++)&#123;    if(arr[j]&gt;arr[j+1])&#123;      var temp = arr[j];      arr[j] = arr[j+1];      arr[j+1] = temp;    &#125;  &#125;&#125;console.log(arr);


</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/05/14/%E5%B8%B8%E8%A7%81%E7%9A%84CSS%E5%B8%83%E5%B1%80%E5%8F%8A%E5%85%B6%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F/" title="常见的CSS布局及其实现方式"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/14/%E5%B8%B8%E8%A7%81%E7%9A%84CSS%E5%B8%83%E5%B1%80%E5%8F%8A%E5%85%B6%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F/" title="常见的CSS布局及其实现方式">常见的CSS布局及其实现方式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-05-14T03:30:00.000Z" title="Created 2023-05-14 11:30:00">2023-05-14</time></span></div><div class="content">常见的CSS布局及其实现方式CSS经典的五种布局方式分别需要使用Flex布局和Grid布局。
空间居中布局空间居中布局指不管容器大小，项目总是占据容器的中心点。

1234.container &#123;    dispaly: grid;    place-items: center;&#125;

上述place-items是简写模式：
1place-items: &lt;align-items&gt;&lt;justify-items&gt;;

align-items属性控制垂直位置，justify-items属性控制水平位置；上述place-items等同于place-items: center center;
同理，左上角（右下角）布局可以这样写：
12place-items: start; // 左上角place-items: end; // 右下角

并列式布局并列式布局就是多个项目并列：

宽度不够的情况下，会自动拆行：

实现方式：
123456789101112// 容器设置为居中和可换行（warp）.container &#123;    display: f ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/05/10/JavaScript%E7%9A%84%E5%86%92%E6%B3%A1%E5%92%8C%E6%8D%95%E8%8E%B7/" title="JavaScript的冒泡和捕获"><div class="post-bg" style="background: url(/images/cover/cover1.jpg)"></div></a></div><div class="recent-post-info"><a class="article-title" href="/2023/05/10/JavaScript%E7%9A%84%E5%86%92%E6%B3%A1%E5%92%8C%E6%8D%95%E8%8E%B7/" title="JavaScript的冒泡和捕获">JavaScript的冒泡和捕获</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time datetime="2023-05-10T03:30:00.000Z" title="Created 2023-05-10 11:30:00">2023-05-10</time></span></div><div class="content">JavaScript的冒泡和捕获JavaScript中的DOM事件模型包括冒泡和捕获，冒泡是事件从当前元素向上到祖先元素，捕获是从上到下达到目标元素。DOM 事件标准描述了事件传播的 3 个阶段：

捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。

目标阶段（Target phase）—— 事件到达目标元素。

冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。


冒泡冒泡（bubbling）是指js中一个元素上发生的一个事件，会触发该元素上的处理程序，然后向上运行父元素的处理程序，一直向上运行其祖先元素的处理程序。
12345&lt;body onclick=“alert(&#x27;body&#x27;)”&gt;    &lt;div onclick=“alert(&#x27;div&#x27;)”&gt;        &lt;p onclick=“alert(&#x27;p&#x27;)”&gt;&lt;/p&gt;    &lt;/div&gt;&lt;/body&gt;

点击最内部的&lt;p&gt;会先ale ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/images/avatar.gif" onerror="this.onerror=null;this.src='/images/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Closure233</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">11</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/catfish233"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/08/08/Axios/" title="Axios"><div style="background: url(/images/cover/cover1.jpg)"></div></a><div class="content"><a class="title" href="/2023/08/08/Axios/" title="Axios">Axios</a><time datetime="2023-08-08T03:30:00.000Z" title="Created 2023-08-08 11:30:00">2023-08-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/08/04/Ajax%E8%AF%B7%E6%B1%82/" title="AJAX请求"><div style="background: url(/images/cover/cover1.jpg)"></div></a><div class="content"><a class="title" href="/2023/08/04/Ajax%E8%AF%B7%E6%B1%82/" title="AJAX请求">AJAX请求</a><time datetime="2023-08-03T16:12:00.000Z" title="Created 2023-08-04 00:12:00">2023-08-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/08/04/JavaScript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%92%8CPromise/" title="JavaScript异步编程和Promise"><div style="background: url(/images/cover/cover1.jpg)"></div></a><div class="content"><a class="title" href="/2023/08/04/JavaScript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%92%8CPromise/" title="JavaScript异步编程和Promise">JavaScript异步编程和Promise</a><time datetime="2023-08-03T16:12:00.000Z" title="Created 2023-08-04 00:12:00">2023-08-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/07/14/JavaScript%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/" title="JavaScript数组常用方法"><div style="background: url(/images/cover/cover1.jpg)"></div></a><div class="content"><a class="title" href="/2023/07/14/JavaScript%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/" title="JavaScript数组常用方法">JavaScript数组常用方法</a><time datetime="2023-07-14T07:45:00.000Z" title="Created 2023-07-14 15:45:00">2023-07-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/21/%E7%AE%80%E5%8D%95%E7%9A%84CSS%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/" title="简单的CSS效果实现"><div style="background: url(/images/cover/cover1.jpg)"></div></a><div class="content"><a class="title" href="/2023/06/21/%E7%AE%80%E5%8D%95%E7%9A%84CSS%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/" title="简单的CSS效果实现">简单的CSS效果实现</a><time datetime="2023-06-21T05:30:00.000Z" title="Created 2023-06-21 13:30:00">2023-06-21</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>Tags</span></div><div class="card-tag-cloud"><a href="/tags/js/" style="font-size: 1.5em; color: #99a9bf">js</a> <a href="/tags/Promise/" style="font-size: 1.1em; color: #999">Promise</a> <a href="/tags/Axios/" style="font-size: 1.1em; color: #999">Axios</a> <a href="/tags/CSS/" style="font-size: 1.3em; color: #99a1ac">CSS</a> <a href="/tags/AJAX/" style="font-size: 1.1em; color: #999">AJAX</a> <a href="/tags/%E5%87%BD%E6%95%B0%E5%B7%A5%E5%85%B7/" style="font-size: 1.1em; color: #999">函数工具</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>Archives</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/08/"><span class="card-archive-list-date">August 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">July 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/06/"><span class="card-archive-list-date">June 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/05/"><span class="card-archive-list-date">May 2023</span><span class="card-archive-list-count">6</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>Info</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">Article :</div><div class="item-count">11</div></div><div class="webinfo-item"><div class="item-name">UV :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">PV :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">Last Push :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-08-09T15:30:14.895Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/images/background1.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By Closure233</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>window.typedJSFn = {
  init: (str) => {
    window.typed = new Typed('#subtitle', Object.assign({
      strings: str,
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50,
    }, null))
  },
  run: (subtitleType) => {
    if (false) {
      if (typeof Typed === 'function') {
        subtitleType()
      } else {
        getScript('https://cdn.jsdelivr.net/npm/typed.js/dist/typed.umd.min.js').then(subtitleType)
      }
    } else {
      subtitleType()
    }
  }
}
</script><script>function subtitleType () {
  getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
    jinrishici.load(result =>{
      if (false) {
        const sub = []
        const content = result.data.content
        sub.unshift(content)
        typedJSFn.init(sub)
      } else {
        document.getElementById('subtitle').textContent = result.data.content
      }
    })
  })
}
typedJSFn.run(subtitleType)
</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>